

	<page-title ng-if="layoutOptions.pageTitles" title="Progress Bars" description="Progress bars and their variants."></page-title>

<div class="row">
	
	<div class="col-md-12">

		<div class="panel panel-default">
			<div class="panel-heading">
				<div class="panel-title">Progress Types</div>
			</div>
			
			<div class="panel-body">
				
				<h5>Available Styles</h5>
				<div class="row">
					
					<div class="col-md-12">
						
						<br />
					
						<div class="progress">
							<div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
								<span class="sr-only">20% Complete (success)</span>
							</div>
						</div>
					
						<br />
						
						<div class="progress progress-bar-default">
							<div class="progress-bar" role="progressbar" aria-valuenow="30" aria-valuemin="0" aria-valuemax="100" style="width: 30%">
								<span class="sr-only">30% Complete (default)</span>
							</div>
						</div>
					
						<br />
						
						<div class="progress progress-bar-purple">
							<div class="progress-bar" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
								<span class="sr-only">40% Complete (purple)</span>
							</div>
						</div>
					
						<br />
						
						<div class="progress progress-bar-blue">
							<div class="progress-bar" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
								<span class="sr-only">50% Complete (blue)</span>
							</div>
						</div>
					
						<br />
						
						<div class="progress progress-bar-red">
							<div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
								<span class="sr-only">60% Complete (red)</span>
							</div>
						</div>
					
						<br />
						
						<div class="progress progress-bar-black">
							<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%">
								<span class="sr-only">70% Complete (black)</span>
							</div>
						</div>
				
					</div>
						
				</div>


				<br />
				<h5>Striped Progressbars</h5>
				
				<div class="row">
					
					<div class="col-md-12">
					
						<div class="progress progress-striped">
							<div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%">
								<span class="sr-only">40% Complete (success)</span>
							</div>
						</div>
						
					</div>
					
				</div>
				
				

				<br />
				<h5>Active Progressbars</h5>
				
				<div class="row">
					
					<div class="col-md-12">
					
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-red" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">
								<span class="sr-only">40% Complete (red)</span>
							</div>
						</div>
				
					</div>
					
				</div>
				
				
				<br />
				<h5>Stacked Progressbars</h5>
				
				<div class="row">
				
					<div class="col-md-12">
						
						<div class="progress progress-striped active">
							<div class="progress-bar progress-bar-success" style="width: 15%">
								<span class="sr-only">15% Complete (success)</span>
							</div>
							<div class="progress-bar progress-bar-warning" style="width: 10%">
								<span class="sr-only">10% Complete (warning)</span>
							</div>
							<div class="progress-bar progress-bar-danger" style="width: 18%">
								<span class="sr-only">18% Complete (danger)</span>
							</div>
							<div class="progress-bar progress-bar-info" style="width: 25%">
								<span class="sr-only">25% Complete (info)</span>
							</div>
						</div>
						
					</div>
					
				</div>				
				
				
			</div>
		</div>
	</div>
</div>





